<template>
  <a-card :bordered="false">
    <a-form
      :form="form"
      @submit="handleSubmit"
    >
      <a-form-item
        label="banner名称"
        :label-col="{ span: 5 ,offset: 4}"
        :wrapper-col="{ span: 7 }"
      >
        <a-input
          v-decorator="[
            'name',
            {rules: [{ required: true, message: '请输入banner名称!' }]}
          ]"
          placeholder="请输入banner名称..."
        ></a-input>
      </a-form-item>
      <a-form-item
        label="banner序号"
        :label-col="{ span: 5 ,offset: 4}"
        :wrapper-col="{ span: 7 }"
      >
        <a-input
          v-decorator="[
            'serial_no',
            {rules: [{ required: true, message: '请输入banner序号!' }]}
          ]"
          placeholder="请输入banner序号..."
        ></a-input>
      </a-form-item>
      <a-form-item
        label="上传banner"
        :label-col="{ span: 5 ,offset: 4}"
        :wrapper-col="{ span: 7 }"
      >
        <div class="clearfix" >
          <a-upload
            :fileList="fileList"
            :remove="handleRemove"
            :beforeUpload="beforeUpload"
            @change="handleUpload"
          >
            <a-button v-if="fileList.length < 1">
              <a-icon type="upload"></a-icon> 选择图片
            </a-button>
            <!--<div v-if="fileList.length < 3">
              <a-icon type="plus" />
              <div class="ant-upload-text">Upload</div>
            </div>-->
          </a-upload>
          <div class="banner_img" style="padding: 10px 10px 10px 0; " v-if="imageUrl">
            <img :src="'https://admin.muyumall.com'+imageUrl" alt="" height="80px">
          </div>
        </div>
      </a-form-item>
      <a-form-item
        label="Banner详情图文"
        :label-col="{ span: 5 ,offset: 4}"
        :wrapper-col="{ span: 7 }"
      >
        <a-button type="primary" @click="showModal">编辑</a-button>
      </a-form-item>
      <a-form-item
        :wrapper-col="{ span: 12, offset: 9 }"
      >
        <a-button
          type="primary"
          html-type="submit"
        >
          保存
        </a-button>
      </a-form-item>
    </a-form>
    <a-modal
      title="Modal"
      v-model="visible"
      width="60%"
      @ok="saveHtml"
      okText="确认"
      cancelText="取消"
    >
      <quill-editor
        class="ql-editor"
        v-model="content"
        ref="myQuillEditor"
        :options="quillConfig"
        @blur="onEditorBlur($event)"
        @focus="onEditorFocus($event)"
        @change="onEditorChange($event)">
      </quill-editor>

    </a-modal>
  </a-card>
</template>

<script>
import { bannerUpload, bannerSave } from '@/api/banner'
import quillConfig from '../../config/quill-config.js'

export default {
  name: 'NewBanner',
  components: {
  },
  data () {
    return {
      quillConfig,
      previewImage: '',
      previewVisible: false,
      visible: false,
      content: '', // 富文本
      uploading: false,
      imgLoading: false,
      imageUrl: '',
      fileList: []
    }
  },
  beforeCreate () {
    this.form = this.$form.createForm(this)
  },
  created () {
  },
  mounted () {
  },
  methods: {
    handleCancel () {},
    onEditorBlur () {}, // 失去焦点事件
    onEditorFocus () {}, // 获得焦点事件
    onEditorChange () {}, // 内容改变事件
    saveHtml (event) {
      this.visible = false
      console.log(this.content)
    },
    showModal () {
      this.visible = true
    },
    handleRemove (file) {
      const index = this.fileList.indexOf(file)
      const newFileList = this.fileList.slice()
      newFileList.splice(index, 1)
      this.fileList = newFileList
      this.imageUrl = ''
    },
    addStyle (Str) {
      let strArr = []
      let newStr = ''
      strArr = Str.split('<img')
      for (let i = 0; i < strArr.length; i++) {
        if (i !== 0) {
          strArr[i] = '<img style=\'max-width:100%;height:auto;\' ' + strArr[i]
        }
        newStr += strArr[i]
      }
      return newStr
    },
    handleSubmit (e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          if (this.content === '') {
            this.$message.warning('请填写banner 详情图文')
            return false
          }
          if (this.imageUrl === '') {
            this.$message.warning('请上传banner')
            return false
          }
          values.img_url = this.imageUrl
          values.details = this.addStyle(this.content)

          // 保存
          bannerSave(values)
            .then((res) => {
              if (res) { this.$message.success('成功！') }
              this.$router.push({ path: 'banner-list' })
            })
            .catch((err) => {
              this.$message.success('失败！')
              console.log(err)
            })
        }
      })
    },
    beforeUpload: function (file) {
      this.fileList = [...this.fileList, file]
      return false
    },
    handleUpload: function () {
      const { fileList } = this
      const formData = new FormData()
      fileList.forEach(file => {
        formData.append('files[]', file)
      })
      this.uploading = true

      bannerUpload(formData)
        .then((res) => {
          this.imageUrl = res[0].url
          this.uploading = false
          this.$message.success('上传成功！')
        })
        .catch((err) => {
          console.log(err)
          this.uploading = false
        })
    }
  }
}
</script>
<style lang="less" scoped>
  .ql-editor{
    height: 300px;
  }
</style>
